<template>
  <div class="zbox">
    <div class="b1">
      <div class="b1-1">
        <div class="b1-1-1">{{detail.productType}}</div>
        <div class="b1-1-2">AI智能交易-{{detail.name}}</div>
      </div>
      <div :class="detail.isOpen === '是' ? 'b1-2':'b1-2 hui'" @click="toDetail">{{detail.isOpen === '是' ? '查看':'暂未开放'}}</div>
    </div>
    <div class="b2">
      {{detail?.profile}}
      <!-- 新手友好，无需盯盘，7X24小时自动挂单买卖，高抛低吸，震荡行情推荐策略 -->
    </div>
    <!-- <div class="b3">
      <div class="b3-item">
        <div class="b3-item-1">10</div>
        <div class="b3-item-2">运行中策略数</div>
      </div>
      <div class="b3-item">
        <div class="b3-item-1">40%</div>
        <div class="b3-item-2">燃油费</div>
      </div>
      <div class="b3-item">
        <div class="b3-item-1" style="color:#36b4ea">75.65%~288.55%</div>
        <div class="b3-item-2">当前收益率</div>
      </div>
    </div> -->
  </div>
</template>
    
<script setup lang='ts'>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
import {Toast} from 'vant'
interface IProps {
  detail: any;
}
const {detail} = defineProps<IProps>()
const router = useRouter()
const toDetail = ()=>{
  if(detail.isOpen === '否') {
    Toast('暂未开放')
    return
  } 
  router.push({
    path:'/strategy/aidetail',
    query:{
      id: detail.id
    }
  })
}
</script>
    
<style lang="scss" scoped>
.zbox {
    padding:14px 14px;
  .b1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .b1-1 {
      display: flex;
      align-items: center;
      .b1-1-1 {
        // width: 32px;
        padding: 6px;
        // height: 20px;
        font-size: 11px;
        color: #f5f5f5;
        font-weight: 600;
        text-align: center;
        // line-height: 20px;
        margin-right: 10px;
        background: #0a7aff;
        border-radius: 2px;
      }
      .b1-1-2 {
        font-weight: 600;
        font-size: 14px;
        color: #000;
      }
    }
    .b1-2 {
      width: 70px;
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0px 4px 0px;
      background-color: #36b4ea;
      color: #f5f5f5;
      font-size: 11px;
      text-align: center;
    }
    .hui{
      background-color: #878B97;
    }
  }
  .b2{
    font-size:12px;
    color:#666;
    line-height: 20px;
    margin:14px 0 0px;
  }
  .b3{
    display: flex;
    justify-content: space-between;
    .b3-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .b3-item-1{
            font-size:14px;
            color:#000;
            margin-bottom:10px;
        }
        .b3-item-2{
            font-size:12px;
            color:#878B97;
        }
    }
  }
}
</style>